<template>
	<view class="content  ">
		<view class="header-report flex-align-center">
			<view class="select-date-box">
				<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="title flex-center">近10周学习数据对比</view>
		</view>
		<view class="content-report">
			<view class="content-report-header flex-align-center">
				<view class="content-report-header-item flex-align-center" style="padding: 51rpx 19rpx 28rpx 19rpx;">
					<view class="circle-bj flex-center">
						01:11:48
					</view>
					<span>本周总有效时长</span>
				</view>
				<view class="content-report-header-item flex-center" style="padding: 51rpx 0rpx 28rpx 0rpx;">
					<view class="line-box">
						<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
					</view>
					<view class="flex-center label-desc">
						<view class="flex-center" style="flex-direction: column;">
							<view class="">
								00:00
							</view>
							<view class="color-716E6E">
								有效
							</view>
						</view>
						<view class="line"></view>
						<view class="flex-center" style="flex-direction: column;">
							<view class="">
								00:00
							</view>
							<view class="color-716E6E">
								在线
							</view>
						</view>
					</view>
				</view>
				<view class="content-report-header-item3 flex-align-center">
					<view>
						<view class="line-box2">
							<qiun-data-charts type="ring" :opts="durationOpts" :chartData="chartData" />
						</view>
						<view class="label">时长分布图</view>
					</view>
					<view class="legend-box flex-align-center">
						<view class="legend-box-left">
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[0]}"></view>
									<span class="name">词汇</span>
								</view>
								<view class="desc">
									0.44%（00:00:19/00:00:23)
								</view>
							</view>
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[1]}"></view>
									<span class="name">例句</span>
								</view>
								<view class="desc">
									未学
								</view>
							</view>
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[2]}"></view>
									<span class="name">句子</span>
								</view>
								<view class="desc">
									未学
								</view>
							</view>
						</view>
						<view class="legend-box-right">
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[3]}"></view>
									<span class="name">语法：</span>
									<span class="name-desc">未学</span>
								</view>

							</view>
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[4]}"></view>
									<span class="name">课文：</span>
									<span class="name-desc">未学</span>
								</view>

							</view>
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[5]}"></view>
									<span class="name">习题：</span>
									<span class="name-desc">未学</span>
								</view>
							</view>
							<view class="legend-box-item">
								<view class="flex-align-center">
									<view class="circle-mini" :style="{background:durationOpts.color[6]}"></view>
									<span class="name">其他：</span>
									<span class="name-desc">100%（00:10:27/00:11:16）</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="content-report-header-item flex-center"
					style="margin-right: 0;padding: 51rpx 0rpx 62rpx 0rpx;">
					<view class="flex-align-center item-num">
						<image class="img-box" src="../../../../static/images/common/jinbi-huang.png"></image>
						<span class="num-orange">269</span>
					</view>
					<view class="flex-align-center item-num">
						<image class="img-box" src="../../../../static/images/common/jinbi-cheng.png"></image>
						<span class="num-orange">0</span>
					</view>
					<view class="flex-align-center item-num">
						<view class="img-box flex-center">
							<image src="../../../../static/images/common/zhuanshi-zi.png"
								style="width: 36rpx;height: 30rpx;"></image>
						</view>

						<span class="num-people">25</span>
					</view>
				</view>
			</view>
			<view class="content-report-content">
				<view class="" style="position: relative;">
					<image src="../../../../static/images/common/tixingbiankuang.png" class="border-corp"></image>
					<view class="corp-title flex-center">词汇专项统计</view>
				</view>

				<view class="content-report-list flex-align-center">
					<view class="content-report-list-item flex-align-center" style="padding: 51rpx 19rpx 28rpx 19rpx;">
						<view class="circle-bj flex-center">
							01:11:48
						</view>
						<span>本周总有效时长</span>
					</view>
					<view class="content-report-list-item flex-center" style="padding: 41rpx 0rpx 28rpx 0rpx;">
						<view class="line-box">
							<qiun-data-charts type="arcbar" :opts="opts" :chartData="Arcbar1" />
						</view>
						<view class="flex-center label-desc">
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									有效
								</view>
							</view>
							<view class="line"></view>
							<view class="flex-center" style="flex-direction: column;">
								<view class="">
									00:00
								</view>
								<view class="color-716E6E">
									在线
								</view>
							</view>
						</view>
					</view>
					<view class="content-report-header-item3 flex-align-center" style="margin-right:0">
						<view>
							<view class="line-box2">
								<qiun-data-charts type="ring" :opts="durationOpts" :chartData="chartData" />
							</view>
							<view class="label">时长分布图</view>
						</view>
						<view class="legend-box flex-align-center">
							<view class="legend-box-right" style="margin-right: 60rpx;">
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[4]}"></view>
										<span class="name">课文：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[5]}"></view>
										<span class="name">习题：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[6]}"></view>
										<span class="name">其他：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
							</view>
							<view class="legend-box-right" style="margin-right: 60rpx;">
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[4]}"></view>
										<span class="name">课文：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[5]}"></view>
										<span class="name">习题：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[6]}"></view>
										<span class="name">其他：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
							</view>
							<view class="legend-box-right">
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[4]}"></view>
										<span class="name">课文：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[5]}"></view>
										<span class="name">习题：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
								<view class="legend-box-item">
									<view class="flex-align-center">
										<view class="circle-mini" :style="{background:durationOpts.color[6]}"></view>
										<span class="name">其他：</span>
										<span class="name-desc">未学</span>
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {


		},
		data() {
			return {
				value: "",
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				"Arcbar1": {
					"series": [{
						"name": "正确率",
						"data": 0.8,
						"color": "#23a0c2"
					}]
				},
				opts: {
					color: ["#1890FF", "#23a0c2", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					title: {
						name: "80%",
						fontSize: 25,
						color: "#23a0c2"
					},
					subtitle: {
						name: "专注度",
						fontSize: 12,
						color: "#000"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				chartData: {
					series: [{
						data: [{
							"name": "词汇",
							"value": 50,
							"labelShow": false
						}, {
							"name": "例句",
							"value": 30,
							"labelShow": false
						}, {
							"name": "句子",
							"value": 20,
							"labelShow": false
						}, {
							"name": "语法",
							"value": 18,
							"labelShow": false
						}, {
							"name": "课文",
							"value": 8,
							"labelShow": false
						}, {
							"name": "习题",
							"value": 8,
							"labelShow": false
						}, {
							"name": "其他",
							"value": 8,
							"labelShow": false
						}]
					}]
				},

				durationOpts: {
					rotate: false,
					rotateLock: false,
					color: ["#0514FA", "#007F06", "#FF9C00", "#FC5F00", "#FF0000", "#F000FF", "#9398D8"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					title: {
						name: "",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "",
						fontSize: 25,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 30,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "transparent"
						}
					}
				}
			}
		},
		methods: {
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.color-716E6E {
		color: #716E6E;

	}

	.color-50A056 {
		color: #50A056;
	}

	.line {
		width: 1rpx;
		height: px_2_vw(29);
		border-left: 1rpx solid #000;
		margin: 0 19rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		background: #fff;
		border-radius: 65rpx;



		// padding: 57rpx 50rpx;
		.header-report {
			width: 100%;
			height: px_2_vw(127);
			background: #C0C3F5;
			border-radius: 65rpx 65rpx 0px 0px;
			padding: 33rpx 44rpx;

			.select-date-box {
				width: px_2_vw(583);
				height: px_2_vw(70);
			}

			.title {
				width: px_2_vw(351);
				height: px_2_vw(70);
				background: #F5F5F6;
				border-radius: 10rpx;
				margin-left: 30rpx;
				color: #434ABF;
				font-weight: 600;
			}
		}

		.content-report {
			padding: 49rpx 50rpx;

			.content-report-header-item {
				width: px_2_vw(215);
				height: px_2_vw(297);
				margin-right: 26rpx;
				background: #C0C3F5;
				border-radius: 14rpx;
				flex-direction: column;
				justify-content: space-between;
				font-size: px_2_vw(22);
				font-weight: 600;



				.item-num {
					width: px_2_vw(150);
					// border: 1rpx solid #000;
				}

				.img-box {
					width: px_2_vw(48);
					height: px_2_vw(48);
					margin-right: 11rpx;
				}

				.num-orange {
					color: #F5680B;
					font-size: px_2_vw(28);
				}

				.num-people {
					color: #DD0654;
					font-size: px_2_vw(28);
				}

			}

			.circle-bj {
				width: px_2_vw(176);
				height: px_2_vw(171);
				border-radius: 50%;
				background: rgba(245, 155, 167, 0.5);
				margin-bottom: 22rpx;
				color: #FF0000;
				font-size: px_2_vw(24);
			}

			.line-box {
				width: px_2_vw(188);
				height: px_2_vw(188);
			}

			.line-box2 {
				width: px_2_vw(220) !important;
				height: px_2_vw(220) !important;
			}

			.content-report-header-item3 {
				width: px_2_vw(1000);
				height: px_2_vw(297);
				margin-right: 26rpx;
				background: #C0C3F5;
				border-radius: 14rpx;
				padding: 28rpx 20rpx 34rpx 20rpx;
				font-size: px_2_vw(26);

				.label {
					width: px_2_vw(220) !important;
					text-align: center;
				}

				.legend-box {
					// flex: 1;
					// flex-wrap: wrap;
					height: px_2_vw(220) !important;

					.legend-box-item {
						// width: px_2_vw(370) !important;
						height: px_2_vw(76) !important;
						font-size: px_2_vw(22);
						// background: #fff;
						margin-right: 27rpx;
						display: flex;
						flex-direction: column;

						.name {
							color: #656565;
							margin-left: 14rpx;
						}

						.desc {
							margin-left: 33rpx;
						}


					}

					.circle-mini {
						width: 16rpx;
						height: 16rpx;
						// background: #0514FA;
						border-radius: 50%;
					}

					.legend-box-right {
						.legend-box-item {
							margin-right: 0rpx;
							height: px_2_vw(56) !important;
						}
					}
				}
			}

			.label-desc {
				font-size: px_2_vw(18);
			}
		}

		.content-report-content {
			.border-corp {
				width: 100%;
				height: px_2_vw(63);
				margin: 22rpx auto;
			}

			.corp-title {
				width: px_2_vw(284);
				height: px_2_vw(57);
				background-image: url('@/static/images/common/duobianxing.png');
				background-size: 100% 100%;
				margin: 0rpx auto;
				font-weight: 600;
				color: #fff;
				position: absolute;
				top: 60rpx;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.content-report-list {
				.content-report-list-item {
					width: px_2_vw(348);
					height: px_2_vw(297);
					margin-right: 26rpx;
					background: #C0C3F5;
					border-radius: 14rpx;
					flex-direction: column;
					justify-content: space-between;
					font-size: px_2_vw(22);
					font-weight: 600;
				}
			}

		}

		::v-deep .uni-select {
			border: 1px solid #0600FF;
		}

		::v-deep .uni-select__input-placeholder {
			color: #0514FA;
			font-weight: 600;
		}

		::v-deep .uni-select__input-text {
			color: #0514FA;
			font-weight: 600;
		}



	}
</style>